import React from 'react';
import { TabBar } from 'antd-mobile';
import {ContentOutline} from 'antd-mobile-icons'
import my from '../images/我的.svg'
import city from '../images/阅读.svg'
import ty from '../images/分类.svg'
import books from '../images/书籍.svg'
import { useLocation, useNavigate } from 'react-router-dom';
function Tabbar() {
  const navigate = useNavigate()
  const location = useLocation()
  const { pathname } = location
  const setRouteActive = (value) => {
    console.log(value);
    navigate(value)
  }
  return (
    <div className='tabbar'>
      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
        <TabBar.Item key='/home/bookcity' icon={<img src={city}/>} title='书城' />
        <TabBar.Item key='/home/classification' icon={<img src={ty}/>} title='分类' />
        <TabBar.Item key='/home/bookshelf' icon={<img src={books}/>} title='书架' />
        <TabBar.Item key='/home/my' icon={<img src={my}/>} title='我的' />
      </TabBar>
    </div>
  )
}

export default Tabbar
